
import React, { useCallback, useEffect, useMemo } from 'react'
import VCard from '../../../components/VCard'
import { getUseInfoList, getVehiclesUseTimesList } from './service'
import { Form, Spin, message } from 'antd'
import SearchForm from '../../../components/SearchForm'
import { ExportToExcel } from '../../../utils/export'


/** 表格信息-查询类型 */
interface QueryUseInfoType {
  vehicle_id: string,
  start_time: string,
  end_time: string
}

export default function VehicleUsageStats() {

  const [form] = Form.useForm();
  
  const PieOption = () => {

  }
  const [useInfo, setUseInfo] = React.useState<any[]>([])
  const [filterData, setFilterData] = React.useState<any[]|null>(null)
  const [useCount, setUseCount] = React.useState<{vehicle_id:string,count:number}[]>([])
  const LineOption = useMemo(() => {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: useCount.map((item: any) => item.vehicle_id),
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: useCount.map((item: any) => item.count),
          type: 'line'
        }
      ]
    }
      
  },[useCount])
  const [loading, setLoading] = React.useState(false)


  const columns=[
    {
      title: '申请编号',
      dataIndex: 'use_id',

    },
    {
      title: '驾驶员编号',
      dataIndex: 'driver_id',

    },
    {
      title: '车辆编号',
      dataIndex: 'vehicle_id',
      search:true,

    },
    {
      title: '开始时间',
      dataIndex: 'start_time',

    },
    {
      title: '结束时间',
      dataIndex: 'end_time',

    },
    {
      title: '目的地',
      dataIndex: 'destination',

    },
    {
      title: '用车原因',
      dataIndex: 'reason',
      ellipsis: true
    }
   
  ]

  

  const queryList = async () => {
    setLoading(true)
    await getUseInfoList().then(res => {

      setUseInfo(res.data.data)
    })
    await getVehiclesUseTimesList().then(res => {
      setUseCount(res.data.data)
    })

    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
      <div className="page-title-container">
        <div className="page-title">出车信息统计</div>
      </div>
      <div className="page-content">
        {/* <VTable></VTable> */}
        {/* <VCard type="card"></VCard> */}
        <Spin spinning={loading}>
          <SearchForm
            form={form}
            exportToExcel={()=>{
              ExportToExcel('/api/use/export','出车信息.xlsx')
            }
              
             }
            params={[
              // { type: 'input', name: 'vehicle_id', label: '车辆编号' },
              { type: 'date', name: 'date', label: '时间' }
            ]}
            onFinsh={()=>{
              const values = form.getFieldsValue();
              const params = {} as QueryUseInfoType;
              
              if(values.date){
                params.start_time = values.date[0].format('YYYY-MM-DD');
               params.end_time = values.date[1].format('YYYY-MM-DD');
                const filteredData = useInfo.filter(item => {
                  const startDate = params.start_time as string;
                  const endDate =  params.end_time as string;
                  const startDate1 = item.start_time
                  const endDate1 = item.end_time
                  console.log(startDate1,startDate,endDate1,endDate);
                  return startDate1 >= startDate && endDate1 <= endDate;
              });
              setFilterData(filteredData);
              }
              else{
                setFilterData(null);
              }
              console.log(values,params);
              
            }}
          />
          <div className="VCard-list">
          <VCard title={'出车信息'} type={'table'} columns={columns} dataSource={filterData||useInfo}></VCard>
          </div>
          <div className="VCard-list">
            <VCard title={'出车次数统计图'} type={'pie'} dataSource={LineOption}></VCard>
          </div>
      
        </Spin>
      </div>
    </div>
  )
}
